<template>
  <div id="skill_index-detail">
    <div class="container">
      <div class="searchbar">
        <span class="searchlogo"></span>
        <label class="search">
          <input placeholder="请输入搜索的内容" v-model="keywords"/>
        </label>
        <div class="search-btn" @click="getSkillsByKeywords"><i class="el-icon-search"></i>点击搜索</div>
      </div>
      <div id="skill-list" class="list">
        <div class="single-skill" v-for="(skill, index) in allSkills">
          <div class="skill-container">
            <img class="cover" :src="skill.picture?skill.picture:'https://www.kuangstudy.com/assert/course/c2/01.jpg'" @click="getNewSkill(skill.id)">
            <div class="detail">
              <div class="name" @click="getNewSkill(skill.id)">
                {{skill.name}}
              </div>
              <div class="desc" @click="getNewSkill(skill.id)">
                {{skill.summary}}
              </div>
              <el-rate class="stars"
                v-model="skill.star"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
              </el-rate>
              <div class="status">
                目前有{{skill.learnAmount}}人在学习，已有{{skill.finishAmount}}人完成学习
              </div>
              <div class="learn-btn" @click="getNewSkill(skill.id)">{{skill.status == 0 ? '开始' : skill.status == 1 ? '继续' : '已完成'}}
                学习
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index_code",
  props: ['type'],
  data() {
    return {
      keywords:'',
      allSkills:[],
      currentPage: 1,
      stop: false
    }
  },
  mounted: function(){
    this.scrollNewSkills();
  },
  methods:{
    getSkills(clear) {
      // 清除原本动态刷新的属性
      if (clear) {
        this.currentPage = 1;
        this.allSkills = [];
        this.stop = false;
      }
      var self = this;
      this.$axios({
        method: 'post',
        url: '/skill/skill/pageSkillCondition/'+self.currentPage+'/10',
        data: {
          type: this.type,
          name: this.keywords
        }
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        //self.allSkills = jsonObj.data.rows;
        for (let i=0; i<10; i++) {
          if (jsonObj.data.rows[i] === undefined || jsonObj.data.rows[i] === null) {
            self.stop = true;
            break;
          }
          self.$set(self.allSkills,self.currentPage*10+i-10,jsonObj.data.rows[i]);
        }
        self.currentPage += 1;
        for(let i = 0; i < self.allSkills.length; i++) {
          self.allSkills[i].star = parseFloat(self.allSkills[i].star);
        }
      })
    },
    getSkillsByKeywords() {
      this.getSkills(true);
      // 给更新过的列表添加滚动事件
      this.scrollNewSkills();
    },
    // 滚动刷新
    scrollNewSkills() {
      const self = this;
      const skillList = document.getElementById("skill-list");
      skillList.addEventListener("scroll", ()=> {
        if ( !self.stop && (skillList.offsetHeight+200-skillList.scrollTop < 0)){// 右边数值越大，越早进行刷新
          self.getSkills(false);
          console.log("scroll for new skills!");
        }
      });
    },
    getNewSkill: function(id) {
      this.$router.push({
        path:"/skillPage/"+id+"/summary"
      })
    }
  },
  watch: {
    // 类型改变，重新渲染
    type() {
      this.getSkills(true);
      // 给更新过的列表添加滚动事件
      this.scrollNewSkills();
    },
    keywords(after, before) {
      if (after === '' || after === null) {
        this.getSkills(true);
        this.scrollNewSkills();
      }
    }
  }

}
</script>

<style scoped lang="scss">
@import "../../../assets/style/common";
#skill_index-detail {
  box-sizing: border-box;
  width: 900px;
  margin-top: 80px;
  //margin-left: 50px;
  .container {
    min-height: 600px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.75);
    box-sizing: border-box;
    padding: 15px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .searchbar {
      display: flex;
      align-items: center;
      justify-content: left;
      margin-bottom: 20px;
      width: 40%;
      .search{
        margin: 0 10px 0 10px;
        input{
          outline: none;
          padding-left: 20px;
          width: 400px;
          font-size: 16px;
          height: 32px;
          line-height: 32px;
          border-radius: 5px;
          border: 0;
          background-color: #f1f1f1;
        }
      }
      .search-btn {
        margin-left: 20px;
        @include btn_add();
      }
    }
    .list {
      box-sizing: border-box;
      padding: 5px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      height: 500px;
      overflow: auto;
      .single-skill {
        border-radius: 10px;
        box-sizing: border-box;
        padding: 5px;
        background: white;
        width: 800px;
        height: 120px;
        margin-bottom: 20px;
        box-shadow: 2px 1px 10px 0 rgba(0, 0, 0, 0.1);
        &:hover {
          box-shadow: 2px 1px 10px 0 #92d3f3;
        }
        .skill-container {
          border-radius: 10px;
          display: flex;
          align-items: center;
          height: 100%;
          width: 100%;
          color: #2d2d2d;
          .cover {
            border-radius: 10px;
            width: 200px;
            height: 110px;
            margin-right: 20px;
            cursor: pointer;
          }
          .detail {
            position: relative;
            width: 550px;
            height: 100%;
            text-align: left;
            div {
              position: absolute;
            }
            .name {
              top: 10px;
              font-size: 22px;
              font-weight: 600;
              &:hover {
                color: #409EFF;
                cursor: pointer;
              }
            }
            .desc {
              width: 75%;
              top: 50px;
              font-size: 14px;
              @include content_over();
              &:hover {
                color: #409EFF;
                cursor: pointer;
              }
            }
          }
          .stars {
            bottom: 5px;
          }
          .status {
            bottom: 5px;
            font-size: 12px;
            color: #909399;
            right: 5px;
          }
          .learn-btn{
            float: right;
            @include btn_add();
            width: 100px;
            right: 0;
            top: 30px;
          }
        }
      }
    }
  }
}

</style>
